<template>
  <div class="toast-container">
    <Transition name="toast">
      <div v-if="visible" :class="['toast', type]">
        <div class="toast-content">
          <span class="toast-icon" v-if="icon">
            <i :class="icon"></i>
          </span>
          <span class="toast-message">{{ message }}</span>
        </div>
        <button class="toast-close" @click="$emit('close')">×</button>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { computed, watch, onMounted, onBeforeUnmount } from 'vue';

// 组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  message: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'info', // info, success, error, warning
    validator: (value) => ['info', 'success', 'error', 'warning'].includes(value)
  },
  duration: {
    type: Number,
    default: 1000 // 3秒后自动关闭
  }
});

// 定义组件事件
const emit = defineEmits(['close']);

// 根据类型计算图标
const icon = computed(() => {
  switch (props.type) {
    case 'success':
      return 'iconfont icon-check-circle';
    case 'info':
      return 'iconfont icon-info-circle';
    case 'error':
      return 'iconfont icon-close-circle';
    case 'warning':
      return 'iconfont icon-warning';
    default:
      return '';
  }
});

// 自动关闭计时器
let timer = null;

const startTimer = () => {
  if (props.duration > 0) {
    timer = setTimeout(() => {
      emit('close');
    }, props.duration);
  }
};

const clearTimer = () => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
};

// 监听visible变化，重新设置计时器
watch(() => props.visible, (newVal) => {
  if (newVal) {
    clearTimer();
    startTimer();
  } else {
    clearTimer();
  }
});

// 组件挂载时启动计时器
onMounted(() => {
  if (props.visible) {
    startTimer();
  }
});

// 组件卸载前清除计时器
onBeforeUnmount(() => {
  clearTimer();
});
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
}

.toast {
  position: relative;
  min-width: 300px;
  padding: 12px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  color: #333;
  pointer-events: auto;
}

.toast-content {
  display: flex;
  align-items: center;
}

.toast-icon {
  margin-right: 8px;
  font-size: 1.2rem;
}

.toast-message {
  font-size: 0.9rem;
}

.toast-close {
  margin-left: 12px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.toast-close:hover {
  color: #666;
}

/* 类型样式 */
.toast.info {
  background-color: #e6f7ff;
  border-left: 4px solid #1890ff;
}

.toast.success {
  background-color: #f6ffed;
  border-left: 4px solid #52c41a;
}

.toast.warning {
  background-color: #fffbe6;
  border-left: 4px solid #faad14;
}

.toast.error {
  background-color: #fff2f0;
  border-left: 4px solid #ff4d4f;
}

/* 过渡动画 */
.toast-enter-active,
.toast-leave-active {
  transition: opacity 0.3s ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
}
</style> 